<template>
  <div>
    <h1>自定义指令</h1>
    <pre>
       指令是什么?
           标签上的属性，特点：v-指令名:属性.修饰符="值"
           v-on:keyup.enter="fn"
        注意：指令的生命周期内不能直接使用this,通过vnode.context获取指令所在实例对象
       自定义指令：自己创建指令
       如何实现？
        定义指令：
          全局指令
           Vue.directive(指令名,{指令的生命周期})
          局部指令
           directives:{
              指令名:{
                指令的生命周期勾子函数
                bind:绑定时（类似beforeMount）,指令绑定于dom时执行，但还没有完成渲染
                inserted:渲染时（类似mounted）,指令所在dom添加到父节点时执行，渲染时执行
                update:更新时（不类似谁），它可能是更新前，也可能是更新后，它的更新是指令所在组件的更新
                componentUpdated:更新后，类似于(updated)指令所在组件有更新且更新完成后执行（指令所在dom包括子组件都更新完成后执行）
                unbind:销毁后（类似于destroyed）,解绑时执行，指令所在dom销毁时执行（v-if="false"）

                bind(dom,obj,vnode){
                   dom:指令所在标签的dom
                   obj:{
                      属性,
                      修饰符
                      值(value)
                   }
                   vnode:虚拟dom节点信息
                      context:指令所在组件的实例对象（this）
                }
                常使用：inserted  componentUpdated    unbind（善后工作，比如清理setInterval等）
              }
           }
         使用：v-指令名:属性.修饰符="值"
         需求：图片的使用，希望使用自定义指令渲染图片的src，有一个按钮点击能更换图片,图片出错就渲染baidu logo
         1:创建自定义指令
         2：绑定：v-showImg="图片地址"
         3：在inserted:给img的src赋值
          知道图片渲染出错了
          dom.onerror=()=>{
            加载出错时执行
          }

          需求：img标签它自己有src的处理，通过自定义指令处理渲染出错，使用一个默认图片

    </pre>
    <input v-test:aaa.xxx="234" type="text">
    <el-button @click="changeImg">更换图片</el-button>
    <!-- <img v-showImg="imgSrc" alt=""> -->
    <br>
    <img v-errorImg alt="">
  </div>
</template>
<script>
export default {
  directives: {
    test: {
      bind(dom, obj, vnode) {
        dom.value = obj.value
        console.log('bind')
      },
      inserted(dom, obj, vnode) {
        console.log('inserted')
        dom.focus()
      },
      update() {
        console.log('update')
      }
    },
    showImg: {
      inserted(dom, obj) {
        dom.src = obj.value
        // 判断图片加载是否出错
        dom.onerror = () => {
          console.log('加载出错了')
          dom.src =
            'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
        }
      },
      componentUpdated(dom, obj) {
        dom.src = obj.value
      }
    },
    errorImg: {
      inserted(dom) {
        dom.src =
          dom.src ||
          'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
        dom.onerror = () => {
          dom.src =
            'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
        }
      },
      componentUpdated(dom) {
        dom.src =
          dom.src ||
          'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
      }
    }
  },
  data() {
    return {
      imgSrc:
        'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf123456.png'
    }
  },
  methods: {
    changeImg() {
      this.imgSrc = 'https://img01.yzcdn.cn/vant/logo123.png'
    }
  }
}
</script>
<style></style>
